<template>
  <el-dialog width="740px" v-model="showDialog" :close-on-click-modal="false" :modal-append-to-body="false"
    :close-on-press-escape="false">
    <template #header>
      <span>投诉信息</span>
    </template>
    <div class="container">
      <el-table :data="tableData" stripe height="65vh" v-loading="loading">
        <el-table-column type="index" width="50" label="#" align="center" />
        <el-table-column prop="district" label="区县" />
        <el-table-column prop="category" label="投诉类别" width="80" align="center" />
        <el-table-column prop="subCategory" label="投诉子类别" align="center" />
        <el-table-column prop="gridName" label="网格名称" width="80" align="center" />
        <el-table-column prop="phoneNumer" label="手机号" width="80" align="center" />
        <el-table-column prop="operatingState" label="操作状态" width="80" align="center" />
        <el-table-column label="分发时间" width="130">
          <template #default="scope">
            {{ getFormulateDate(scope.row.dispatchTime) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showDialog = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
// api相关 - 工具
import { apiCommon, getFormulateDate } from "@/utils/index.js";
import * as complainApi from "@/api/complain/complain";

const showDialog = ref(false);
const tableData = ref([]);

let loading = ref(true)

/**
 * 父组件调弹框显示方法
 */
const show = (circleData) => {
  // console.log("点击圆形区域获取数据", circleData);
  showDialog.value = true;

  setComplainDetailData(circleData);
};

const setComplainDetailData = async (circleData) => {
  // 获取接口数据接口
  let params = {
    ids: circleData.complaintIdListStr,
  };
  // console.log(params)

  let complainDetailData = await apiCommon(complainApi.queryComplaintListbyIds, params);
  tableData.value = complainDetailData.data;

  loading.value = false
}

defineExpose({ show });
</script>

<style lang="scss" scoped></style>
